<template>
	<view class="wrap">
		<form>
			<view class="form_item_h">
				<view class="h" style="width: 70%;">
					换房申请
				</view>
				<view style="width: 20%;text-align: end;color: #ff5a00;">
					{{item.refundState==1?'待审核':item.refundState==2?'审核中':item.refundState==3?'审核完毕':item.refundState==4?'已驳回':''}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>原合同名称</text>
				</view>
				<view class="input">
					{{list.contractName}}
				</view>
			</view>

			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>现合同名称</text>
				</view>
				<view class="input">
					{{list.contractName}}
				</view>
			</view>

			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>门店名称</text>
				</view>
				<view class="input">
					{{list.deptName}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>户型</text>
				</view>
				<picker class="input" :value="typeIndex" :range="type" :range-key="'dictLabel'" @change="typePciker">
					<view v-if="typeIndex==''" style="color: #AAACAB;">
						请选择户型
					</view>
					<view v-else>
						{{pay[typeIndex].dictLabel}}
					</view>
				</picker>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>房号</text>
				</view>
				<picker class="input" :value="roomIndex" :range="room" :range-key="'dictLabel'" @change="roomPciker">
					<view v-if="roomIndex==''" style="color: #AAACAB;">
						请选择房号
					</view>
					<view v-else>
						{{room[roomIndex].dictLabel}}
					</view>
				</picker>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>换房时间</text>
				</view>
				<view class="input">
					换房时间
				</view>
			</view>

			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>申请人</text>
				</view>
				<view class="input">
					{{list.cardName}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>新房租金</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入新房租金" v-model="enterpriseAddress">
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>冲抵金额</text>
				</view>
				<input type="text" placeholder-class="font_size" placeholder="请输入冲抵金额" v-model="enterpriseAddress">
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>合同生效日期</text>
				</view>
				<picker class="input" mode="date" :value="date" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view v-if="date==''" style="color: #AAACAB;">
						请选择合同生效日期
					</view>
					<view v-else>
						{{date}}
					</view>
				</picker>
			</view>

			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>租赁时长</text>
				</view>
				<picker class="input" :value="timeIndex" :range="time" :range-key="'dictLabel'" @change="timePciker">
					<!-- <picker class="input" :value="timeIndex" :range="time" @change="timePciker"> -->
					<view v-if="timeIndex==''" style="color: #AAACAB;">
						请选择租赁时长
					</view>
					<view v-else>
						{{time[timeIndex].dictLabel}}
					</view>
				</picker>
			</view>

			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>合同结束日期</text>
				</view>
				<view class="input">
					{{all.endTime}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>押金</text>
				</view>
				<view class="input" style="color: #ff5a00;">
					{{all.contractDeposit}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>租赁总额</text>
				</view>
				<view class="input" style="color: #ff5a00;">
					{{all.rentalAmount}}
				</view>
			</view>

			<view class="form_item">
				<view class="label">
					<text class="label_text">*</text><text>缴纳方式</text>
				</view>
				<picker class="input" :value="payIndex" :range="pay" :range-key="'dictLabel'" @change="payPciker">
					<view v-if="payIndex==''" style="color: #AAACAB;">
						请选择缴纳方式
					</view>
					<view v-else>
						{{pay[payIndex].dictLabel}}
					</view>
				</picker>
			</view>


			<view class="fixed" style="display: flex;">
				<view class="btn" style="background: #ff5a00;margin-left: 360rpx;" @click="btn(0)">申请换房</view>
			</view>
		</form>
	</view>
</template>

<script module="utils" lang="wxs" src="../../utils/imgSrc.wxs"></script>

<script>
	import config from '../../config.js';

	import {
		throttle
	} from "@/utils/throttle.js"

	export default {
		data() {
			return {
				permission: uni.getStorageSync('permission'),
				list: [],
				datetimesingle: '',
				refundId: '',

				refundState: true,
				// 合同生效日期
				date: '',
				startDate: '',
				endDate: '',

				typeIndex: '',

				time: [],
				timeIndex: '',
			};
		},

		onLoad(option) {
			this.refundId = option.refundId

			let data = {
				refundId: option.refundId
			}
			this.api.get('hetong/refund/app/selRefundIdById', data).then(res => {
				if (res.data.code == 200) {
					this.list = res.data.data
					if (res.data.data.refundState == '1') {
						this.refundState = false
					} else {
						this.refundState = true
					}

					if (res.data.data.expirePrice != null) {
						this.expirePrice = res.data.data.expirePrice
					} else {
						this.expirePrice = 0
					}
				}
			})

			this.picList()
		},
		onShow() {},
		onReady() {},
		methods: {
			timePciker(index) {
				this.timeIndex = index.detail.value
				if (this.date != '') {
					// this.timeIndex = index.detail.value
					let data = {
						roomId: uni.getStorageSync("roomId"),
						monthSum: this.time[this.timeIndex].dictValue,
						startTime: this.date,
					}
					this.api.get('hetong/contract/app/selContractPrice', data).then(res => {
						// console.log(res);
						if (res.data.code == 200) {
							this.all = res.data.data
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				} else {
					uni.showToast({
						title: '请优先选择合同生效日期',
						icon: 'none',
						duration: 2000
					});
				}
			},
			order() {
				let data = {
					contractId: this.list.contractId,
					payPrice: this.refundPrice
				}
				this.api.post('hetong/contract/app/newPayPrice', data).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '支付成功',
							icon: 'none',
							duration: 1500
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1500
						});
					}
				})
			},
			roomSelect(e) {
				uni.uploadFile({
					url: config.apiUrl + 'hetong/contract/app/upload',
					method: 'POST',
					dataType: 'json',
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: uploadFileRes => {
						let data = JSON.parse(uploadFileRes.data)
						// 上传图片 二维编码
						this.roomFile.push(e.tempFilePaths[0])
						// console.log('1', this.roomFile);
						if (data.code == 200) {
							// console.log('this.roomUrlList', this.roomUrlList);
							// 上传图片回显
							let url = {
								url: data.data.url
							}
							this.roomUrlList.push(url)

							// console.log('2', this.roomUrlList);
							// 上传图片 id
							this.roomFileList.push(data.data.ossId)
							// console.log(this.roomFileList);
						} else {
							uni.showToast({
								title: '格式错误，请重新上传',
								icon: 'none',
								duration: 1500
							});
						}
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			roomFail() {
				uni.showToast({
					title: '操作失败，请稍后再试',
					icon: 'none',
					duration: 1500
				});
				this.roomFile = []
				this.roomUrlList = []
				this.roomFileList = []
			},
			roomDel(e) {
				console.log(e);
				let id = this.roomFile.indexOf(e.tempFilePath)
				// let index = this.roomUrlList.indexOf(e.tempFilePath)
				// if (index) {
				// 	this.roomUrlList.splice(index, 1)
				// }
				this.roomFile.splice(id, 1)
				this.roomUrlList.splice(id, 1)
				this.roomFileList.splice(id, 1)
			},

			otherSelect(e) {
				uni.uploadFile({
					url: config.apiUrl + 'hetong/contract/app/upload',
					// header: {
					// 	'Content-Type': 'application/x-www-form-urlencoded'
					// },
					method: 'POST',
					dataType: 'json',
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: uploadFileRes => {
						let data = JSON.parse(uploadFileRes.data)
						// 上传图片 二维编码
						this.otherFile.push(e.tempFilePaths[0])
						// console.log('1', this.otherFile);
						if (data.code == 200) {
							// console.log(data.data);
							// 上传图片回显
							let url = {
								url: data.data.url
							}
							this.otherUrlList.push(url)

							// console.log('2', this.otherUrlList);
							// 上传图片 id
							this.otherFileList.push(data.data.ossId)

							// console.log(this.otherFileList);
						} else {
							uni.showToast({
								title: '格式错误，请重新上传',
								icon: 'none',
								duration: 1500
							});
						}
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			otherFail() {
				uni.showToast({
					title: '操作失败，请稍后再试',
					icon: 'none',
					duration: 1500
				});
				this.otherFile = []
				this.otherUrlList = []
				this.otherFileList = []
			},
			otherDel(e) {
				console.log(e);
				let id = this.otherFile.indexOf(e.tempFilePath)
				// console.log(id);
				// let index = this.otherUrlList.indexOf(e.tempFilePath)
				// if (index) {
				// 	this.otherUrlList.splice(index, 1)
				// }
				this.otherUrlList.splice(id, 1)
				this.otherFile.splice(id, 1)
				this.otherFileList.splice(id, 1)
			},
			damageSelect(e) {
				uni.uploadFile({
					url: config.apiUrl + 'hetong/contract/app/upload',
					// header: {
					// 	'Content-Type': 'application/x-www-form-urlencoded'
					// },
					method: 'POST',
					dataType: 'json',
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: uploadFileRes => {
						let data = JSON.parse(uploadFileRes.data)
						// 上传图片 二维编码
						this.damageFile.push(e.tempFilePaths[0])
						// console.log('1', this.damageFile);
						if (data.code == 200) {
							// console.log(data.data);
							// 上传图片回显
							let url = {
								url: data.data.url
							}
							this.damageUrlList.push(url)

							// console.log('2', this.damageUrlList);
							// 上传图片 id
							this.damageFileList.push(data.data.ossId)

							// console.log(this.damageFileList);
						} else {
							uni.showToast({
								title: '格式错误，请重新上传',
								icon: 'none',
								duration: 1500
							});
						}
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			damageFail() {
				uni.showToast({
					title: '操作失败，请稍后再试',
					icon: 'none',
					duration: 1500
				});
				this.damageFile = []
				this.damageUrlList = []
				this.damageFileList = []
			},
			damageDel(e) {
				let id = this.damageFile.indexOf(e.tempFilePath)
				// console.log(id);
				this.damageFile.splice(id, 1)
				this.damageFile.splice(id, 1)
				// let index = this.otherUrlList.indexOf(e.tempFilePath)
				// if (index) {
				// 	this.damageFile.splice(index, 1)
				// }
				this.damageFileList.splice(id, 1)
			},

			PicFun(index) {
				if (this.list.refundState == 1) {
					let data = {
						refundId: this.refundId,
						defaultImgs: this.roomFileList.join(","),
						damageImgs: this.damageFileList.join(","),
						dashboardImgs: this.otherFileList.join(","),
					}

					data = JSON.stringify(data)
				} else {
					let data = {
						refundId: this.refundId,
						defaultImgs: this.roomFileList,
						damageImgs: this.damageFileList,
						dashboardImgs: this.otherFileList,
					}
				}


				this.api.post('hetong/refund/app/refundImg', data).then(res => {
					if (res.data.code == 200) {}
				})
			},

			picList() {
				let data = {
					refundId: this.refundId
				}
				let roomUrlList = []
				let otherUrlList = []
				let damageUrlList = []
				this.api.get('hetong/refund/app/getRefundImg', data).then(res => {
					if (res.data.code == 200) {
						for (let i = 0; i < res.data.data.defaultImgs.imgUrls.length; i++) {
							let url = {
								url: res.data.data.defaultImgs.imgUrls[i]
							}
							this.roomFileList.push(res.data.data.dashboardImgs.imgUrls[i].ossId)
							roomUrlList.push(url)
						}

						for (let l = 0; l < res.data.data.dashboardImgs.imgUrls.length; l++) {
							let url = {
								url: res.data.data.dashboardImgs.imgUrls[l]
							}
							this.otherFileList.push(res.data.data.dashboardImgs.imgUrls[l].ossId)
							otherUrlList.push(url)
						}

						for (let z = 0; z < res.data.data.damageImgs.imgUrls.length; z++) {
							let url = {
								url: res.data.data.damageImgs.imgUrls[z]
							}
							this.damageFileList.push(res.data.data.dashboardImgs.imgUrls[z].ossId)
							damageUrlList.push(url)
						}

						this.roomUrlList = roomUrlList
						this.otherUrlList = otherUrlList
						this.damageUrlList = damageUrlList
					}
				})
			},

			btn(index) {
				let data = {
					refundId: this.refundId,
					postCode: uni.getStorageSync('user'),
					openId: uni.getStorageSync('openId'),
					result: index,
					contractId: this.list.contractId,
					deptId: this.list.deptId,
					appCode: 1,
					trialName: this.list.trialName,
					// 实际退费总金额
					refundPrice: this.refundPrice,
					refundDeposit: this.list.refundDeposit,
					refundRent: this.list.refundRent,
					refundWater: this.refundWater,
					refundElectricity: this.refundElectricity,
					waterNum: this.waterNum,
					electricityNum: this.electricityNum,
					gasNum: this.gasNum,
					refundGas: this.refundGas,
					damages: this.damages,
					defaultPrice: this.defaultPrice,
					refundTime: this.list.refundTime,
					refundDetails: this.refundDetails,
					refundState: this.list.refundState,
					reject: this.reject,
					dayNum: this.list.dayNum,
					deptName: this.list.deptName,
					contractForm: this.list.contractForm,
					contractPhone: this.list.contractPhone,
					endTime: this.list.endTime,
					contractDeposit: this.list.contractDeposit,
					contractName: this.list.contractName,
					cardName: this.list.cardName,
					endRefundTime: this.list.endRefundTime,
					expirePrice: this.expirePrice,
				}

				// if (this.roomUrlList.length == 0) {
				// 	uni.showToast({
				// 		title: '请上传室内图片',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// } else
				// if (this.waterNum == '') {
				// 	uni.showToast({
				// 		title: '请输入水表数',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// } else if (this.electricityNum == '') {
				// 	uni.showToast({
				// 		title: '请输入电表数',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// }
				// //  else if (this.gasNum == '') {
				// // 	uni.showToast({
				// // 		title: '请输入燃气表数',
				// // 		icon: 'none',
				// // 		duration: 1500
				// // 	});
				// // } 
				// else if (this.otherUrlList.length == 0) {
				// 	uni.showToast({
				// 		title: '请上传水电燃气表，无则不需上传',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// } else
				// if (this.refundWater == '') {
				// 	uni.showToast({
				// 		title: '请输入退余水费金额',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// } else if (this.refundElectricity == '') {
				// 	uni.showToast({
				// 		title: '请输入退余电费金额',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// } else if (this.refundGas == '') {
				// 	uni.showToast({
				// 		title: '请输入退余燃气费金额',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// } else if (this.damages == '') {
				// 	uni.showToast({
				// 		title: '请输入赔偿金额',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// } else if (this.defaultPrice == '') {
				// 	uni.showToast({
				// 		title: '请输入违约金',
				// 		icon: 'none',
				// 		duration: 1500
				// 	});
				// } else {
				if (index == 0) {
					if (this.reject == '') {
						uni.showToast({
							title: '请输入驳回原因',
							icon: 'none',
							duration: 1500
						});
					} else {
						this.api.post('hetong/refund/app/examineApp', data).then(res => {
							if (res.data.code == 200) {
								uni.showToast({
									title: '申请成功',
									icon: 'none',
									duration: 1500
								});
								uni.navigateBack({
									delta: 1
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 1500
								});
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				}
				// }
			}
		},
		computed: {
			getBalance() {
				this.refundPrice = this.list.refundDeposit + this.list.refundRent - this.refundWater - this
					.refundElectricity - this
					.refundGas - this.damages - this.defaultPrice - this.expirePrice
			}
		},
	};
</script>

<style lang="scss">
	.fixed {
		width: 100%;
		height: 10vh;
		background-color: white;
		position: fixed;
		bottom: 0;
		z-index: 99;
	}

	.datetime {
		position: absolute;
		width: 55%;
		// height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: black;
		margin-top: -10rpx;
		// line-height: 40rpx;
		text-align: end;
	}

	.flex_most {
		width: 28rpx;
		height: 28rpx;
		margin-top: 5rpx;
	}

	.flex_logo {
		width: 28rpx;
		height: 28rpx;
		margin-top: 46rpx;
	}

	.logo {
		width: 80rpx;
		height: 80rpx;
		margin-top: 20rpx;
		margin-left: 310rpx;
	}

	.wrap {
		margin: 0 auto 54rpx;
		width: 718rpx;
	}

	.flex {
		display: flex;
		justify-content: flex-end;
	}

	.form_item_h {
		width: 718rpx;
		height: 40rpx;
		border-bottom: 1rpx solid #aaacba;
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		padding: 40rpx 0;
	}

	#submit {
		width: 660rpx;
		height: 112rpx;
		line-height: 112rpx;
		background: #ff6900;
		border-radius: 8rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		margin-top: 30rpx;
	}

	.gray_h {
		width: auto;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #AAACAB;
		line-height: 40rpx;
		margin: 34rpx 0 44rpx 24rpx;
		box-sizing: border-box;
	}

	textarea {
		width: 564rpx;
		height: 190rpx;
		border: 2rpx solid #F7F4F4;
		margin: 0 auto;
		font-size: 28rpx;
		font-weight: 400;
		// color: #AAACAB;
		padding: 24rpx 38rpx 14rpx 38rpx;
	}

	.placeholder_textarea {
		font-size: 28rpx;
		font-weight: 400;
		color: #AAACAB;

	}

	.h {
		height: 48rpx;
		font-size: 34rpx;
		font-weight: 400;
		color: #1A1A1A;
		line-height: 48rpx;
		margin-left: 44rpx;
	}

	form {
		width: 718rpx;

		.form_item_logo {
			width: 718rpx;
			height: 120rpx;
			border-bottom: 1rpx solid #F7F4F4;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			overflow: hidden;

			.label {
				width: 40%;
				height: 120rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
				line-height: 120rpx;

				.label_text {
					color: red;
					margin-left: 28rpx;
					margin-top: 16rpx;
					margin-right: 10rpx;
				}
			}

			.font_size {
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
			}

			.input {
				width: 55%;
				height: 120rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 120rpx;
				text-align: end;
			}

		}

		.uni-file-picker__container {
			display: flex;
			box-sizing: border-box;
			flex-wrap: wrap;
			margin: -5px;
			width: 660rpx;
			margin: 0 auto;
		}

		.from_file {
			width: 718rpx;
			height: 40rpx;
			border-bottom: 1rpx solid #F7F4F4;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			overflow: hidden;
			padding: 40rpx 0 20rpx;

			.label {
				width: 40%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
				line-height: 40rpx;

				.label_text {
					color: red;
					margin-left: 28rpx;
					margin-top: 16rpx;
					margin-right: 10rpx;
				}
			}

			.input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}

			.font_size {
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
			}

			input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}
		}


		.form_item {
			width: 718rpx;
			height: 40rpx;
			border-bottom: 1rpx solid #F7F4F4;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			overflow: hidden;
			padding: 40rpx 0;


			.label {
				width: 40%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
				line-height: 40rpx;

				.label_text {
					color: red;
					margin-left: 28rpx;
					margin-top: 16rpx;
					margin-right: 10rpx;
				}
			}

			.input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}

			.font_size {
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
			}

			input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}
		}
	}

	.btn {
		border-radius: 100rpx;
		text-align: center;
		height: 7vh;
		line-height: 7vh;
		width: 45%;
		color: #f3f3f3;
		margin: 1.5vh 0 1.5vh 0;
		font-size: 30rpx;
	}
</style>